<template>
	<div :id="`${conStr.constr}_content`"></div>
</template>
<script setup>
import { reactive, watch, createApp } from 'vue';
import store from '../../../store/';
import { useStore } from 'vuex';
import router from '../../../router/index.js';

const storeAp = useStore();

let conStr = reactive({ constr: '', newApp: {}, oldApp: {}});
function DynamicImp(newVal, oldVal) {
	//new Terget
	conStr.constr = storeAp.state.compK_V[newVal];

	//如果 有新传值 将现有 app 传到 oldapp 中 并且 unmount 该挂载元素数据
	if (oldVal != undefined) {
		conStr.oldApp = conStr.newApp;
		conStr.oldApp.unmount();
	}
	import(`./contentTemplate/${conStr.constr}.vue`).then(c => {
		conStr.newApp = createApp(c.default);
		conStr.newApp.provide('getSourceUrl',getSourceUrl)
		conStr.newApp.use(store).use(router);
		conStr.newApp.mount(`#${conStr.constr}_content`);
	});
}

//default Load
DynamicImp(storeAp.state.user_reload_id);

watch(
	() => storeAp.state.user_reload_id,
	(newVal, oldVal) => {
		DynamicImp(newVal, oldVal);
	}
);


function getSourceUrl() {
	
	// let currentID = store.state.user_reload_id;
	console.log(store.state.user_reload_id);
	// ReProp.source_url = currentID;
}
</script>

<style scoped lang="scss"></style>
